<template>
<div>
  <NavBar>
    <template v-slot:default>商品详情:{{id}}</template>
  </NavBar>
  <div class="detail" style="margin-top: 45px">
  <van-image
      width="100%"
      lazy-load
      :src="detail.cover_url" style="margin-left: 20px;width: 90%;height: 250px"
  />
    <van-card style="text-align:left"
        :num="detail.stock"
        :price="detail.price+'.00'"
        :desc="detail.description"
        :title="detail.title">
      <template #tags>
        <van-tag plain type="danger">新书</van-tag>
        <van-tag plain type="danger" style="margin-left: 10px">推荐</van-tag>
      </template>
      <template #footer>
        <van-button type="warning" @click="handleAddCart">加入购物车</van-button>
        <van-button type="danger" @click="goToCart">立即购买</van-button>
      </template>
    </van-card>
    <van-tabs v-model="active">
      <van-tab title="概述">
        <div class="content3" v-html="detail.details"></div>
      </van-tab>
      <van-tab title="热评">
        <div style="text-align: center;margin-top: 20px">暂时还没有热评呢</div>
      </van-tab>
      <van-tab title="相关图书">
        <div >
          <GoodsList :goodsList="like_goods"/>
        </div>
      </van-tab>
    </van-tabs>
  </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar";
import GoodsList from '@/components/content/goods/index'
import {useRoute,useRouter} from 'vue-router'
import {useStore} from 'vuex'
import {ref,reactive,toRefs,onMounted,getCurrentInstance} from 'vue'
import {Notify} from "vant";
export default {
  name: "index",
  components: {NavBar,
  GoodsList},
  setup(){
    const store=useStore()
    let active=ref(0)
    const route=useRoute()
    const router=useRouter()
    const {proxy}=getCurrentInstance()
    let book=reactive({
      detail:{},
      like_goods:[],
      comments:[]
    })
    let id=ref(0)
    onMounted(()=>{
      id.value=route.query.id
      proxy.$API.detail.getDetail(id.value).then(res=>{
        console.log(res)
        book.detail=res.goods
        book.like_goods=res.like_goods
      })
    })
    const  handleAddCart=()=>{
      proxy.$API.cart.addCart({goods_id:book.detail.id,num:1}).then(res=>{
        console.log(res)
        if(res.status=='204'||res.status=='201'){
          Notify('添加成功')
          store.dispatch('updateCart')
        }
      })
    }
    const goToCart=()=>{
      proxy.$API.cart.addCart({goods_id:book.detail.id,num:1}).then(res=>{
        console.log(res)
        if(res.status=='204'||res.status=='201'){
          Notify('添加成功到购物车')
          store.dispatch('updateCart')
          router.push({
            path:'/shopCart'
          })
        }
      })
    }
    return{
      id,
      ...toRefs(book),
      active,
      handleAddCart,
      goToCart
    }
  }
}
</script>

<style>
.content3 img{
min-height: 2000px!important;
  /*必须要去掉scoped不然不能修改v-html解析的标签的大小*/
  width: 100%;
}
</style>
